<template>
    <div class="container">
        <h1>{{ title }}
            <el-button
                    type="text"
                    @click="addNewMenu">
                {{btnText}}
            </el-button>
        </h1>
        <div class="panel panel-success">
            <div class="panel-heading">
                <el-form ref="form" :inline="true" label-width="80px">
                    <el-form-item label="菜品分类:">
                        <el-select v-model="menuSelect" clearable placeholder="请选择菜品的分类">
                            <el-option
                                    v-for="item in menuType"
                                    :key="item.type"
                                    :label="item.name"
                                    :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="菜名搜索:">
                        <el-input v-model="searchKeyword" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-button type="success">查询</el-button>
                </el-form>
            </div>
            <div class="panel-body">
                <el-table
                        ref="multipleTable"
                        :data="menuTableData"
                        tooltip-effect="dark"
                        show-overflow-tooltip
                        style="width: 100%"
                        stripe
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="菜名"
                            show-overflow-tooltip
                            prop="name"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            width="300"
                            show-overflow-tooltip
                            prop="description"
                            label="描述">
                    </el-table-column>
                    <el-table-column
                            prop="calorie"
                            sortable
                            label="卡路里">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            sortable
                            label="价格">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="stock"
                            label="推荐度">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stock"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="是否上架">
                        <template slot-scope="scope">
                            <el-switch
                                    :width="switchWidth"
                                    v-model="scope.row.grounding"
                                    on-text="已上架"
                                    @change="handleSwitchChange(scope.$index, scope.row)"
                                    off-text="已下架">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            :width="btnWidth"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="small"
                                    @click="handleEdit(scope.$index, scope.row)">
                                <i class="el-icon-edit"></i>
                            </el-button>
                            <el-button
                                    size="small"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <footer>
                    <el-button type="primary" @click="batchUp">批量上架</el-button>
                    <el-button type="warning" @click="batchDown">批量下架</el-button>
                    <el-button type="danger" @click="batchDelete">批量删除</el-button>
                    <div class="pagination-content pull-right">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="200">
                        </el-pagination>
                    </div>
                </footer>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        title: '菜品中心',
        btnText: '添加新菜',
        menuSelect: '', // 菜品分类下拉框数据
        searchKeyword: '', // 搜索框关键词
        switchWidth: 80, // switch插件的宽度大小
        btnWidth: 120, // 操作列宽度
        currentPage: 1,
        menuType: [ // 下拉选择器的分类
          {
            'name': '热榜', // 分类名
            'type': 1 // 分类对应的id
          },
          {
            'name': '好吃的',
            'type': 2
          }
        ],
        menuTableData: [
          {
            'id': '123456',
            'name': '皮蛋粥',
            'price': 1.2,
            'description': '好吃的皮蛋粥好吃的皮蛋粥好吃的皮蛋粥好吃的皮蛋粥好吃的皮蛋粥好吃的皮蛋粥好吃的皮蛋粥好吃的皮蛋粥',
            'calorie': '10', // 卡路里
            'stock': 10,
            'icon': 'http://xxx.com',
            'image': 'http://xxx.com',
            'grounding': false
          },
          {
            'id': '123456',
            'name': '皮蛋粥',
            'price': 1.3,
            'description': '好吃的皮蛋粥',
            'calorie': '11', // 卡路里
            'stock': 11,
            'icon': 'http://xxx.com',
            'image': 'http://xxx.com',
            'grounding': false
          },
          {
            'id': '123456',
            'name': '皮蛋粥',
            'price': 1.4,
            'description': '好吃的皮蛋粥',
            'calorie': '12', // 卡路里
            'stock': 12,
            'icon': 'http://xxx.com',
            'image': 'http://xxx.com',
            'grounding': false
          },
          {
            'id': '123456',
            'name': '皮蛋粥',
            'price': 1.5,
            'description': '好吃的皮蛋粥',
            'calorie': '13', // 卡路里
            'stock': 13,
            'icon': 'http://xxx.com',
            'image': 'http://xxx.com',
            'grounding': false
          },
          {
            'id': '123456',
            'name': '皮蛋粥',
            'price': 1.6,
            'description': '好吃的皮蛋粥',
            'calorie': '15', // 卡路里
            'stock': 14,
            'icon': 'http://xxx.com',
            'image': 'http://xxx.com',
            'grounding': false
          },
          {
            'id': '123456',
            'name': '皮蛋粥',
            'price': 1.7,
            'description': '好吃的皮蛋粥',
            'calorie': '16', // 卡路里
            'stock': 15,
            'icon': 'http://xxx.com',
            'image': 'http://xxx.com',
            'grounding': false
          },
          {
            'id': '123456',
            'name': '皮蛋粥',
            'price': 1.8,
            'description': '好吃的皮蛋粥',
            'calorie': '17', // 卡路里
            'stock': 16,
            'icon': 'http://xxx.com',
            'image': 'http://xxx.com',
            'grounding': false
          }
        ]
      }
    },
    methods: {
      handleSelectionChange (val) {
        console.log(val)
      },
      handleDelete (index, row) {
        console.log(index, row)
        this.$confirm('确定删除菜，删除后不可撤销, 是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          this.menuTableData.splice(index, index + 1)
          this.$notify({
            title: '删除成功',
            message: '成功删除:' + row.name,
            type: 'success'
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleEdit (index, row) {
        let id = row.id
        this.$router.push({name: 'menu.detail', params: {id: id}})
      },
      handleCurrentChange (val) {
        console.log(val)
      },
      handleSizeChange (val) {
        console.log(val)
      },
      handleSwitchChange (index, row) {
        let message = row.name
        message += row.grounding ? '上架成功' : '下架成功'
        this.$notify({
          type: 'success',
          message: message,
          duration: 1000
        })
      },
      batchUp () {
        let selection = this.$refs.multipleTable.selection
        for (let i = 0; i < selection.length; i++) {
          selection[i].grounding = true
        }
      },
      batchDown () {
        let selection = this.$refs.multipleTable.selection
        for (let i = 0; i < selection.length; i++) {
          selection[i].grounding = false
        }
      },
      batchDelete () {
        this.$notify({
          type: 'error',
          message: '功能待开发',
          duration: 1000
        })
      },
      addNewMenu () {
        this.$router.push({name: 'menu.detail', params: {id: 0}})
      }
    }
  }
</script>

<style>
    .el-form--inline .el-form-item {
        margin-bottom: 0px;
    }

    footer {
        padding: 10px 0;
    }
</style>
